<template>
	<view>
		<navi-shell :back="true" v-bind:title="coursename">
			<text class="iconfont icon-biji ic-tianjia" @click.stop="clickShowUser"></text>
		</navi-shell>
		<view v-if="isLogin" class="content">
			<view v-for="(chapter,index) in chapters" :key="chapter.id" class="chapter-content">
				<text v-if="chapter.open == false" class="iconfont icon-gouxuan ic-open"
					@click="chapterOpenClose(chapter)"></text>
				<text v-if="chapter.open == true" class="iconfont icon-gouxuan1 ic-open"
					@click="chapterOpenClose(chapter)"></text>
				<view class="chapter-sort">
					<text class="chapter-name">{{chapter.name}}</text>
					<text class="chapter-question">共{{chapter.countQuestion}}题</text>
					<text class="chapter-avg">平均分:</text>
					<text class="chapter-fraction">[--]</text>
				</view>			
				<text class="chapter-desc">{{chapter.desc}}</text>
			</view>
			<view v-if="chapters.length == 0" class="chapter-no">没有章节哦!</view>
		</view>
		<dialog-shell ref="shell" title="添加新的章节" @confirm='chapterCommit'>
			<input type="text" placeholder="请输入章节名称!" class="edt-title" placeholder-class="txt-holder"
				@input="inputGetTitle" />
			<textarea @input="inutGetContent" class="edt-desc" placeholder="请输入章节描述!"
				placeholder-class="txt-holder"></textarea>
		</dialog-shell>
	</view>
</template>

<script>
	let app = getApp()
	let name = ''
	let desc = ''
	export default {
		data() {
			return {
				isLogin: false,
				chapters: [],
				coursename: '',
				chapterId: ''
			}
		},
		onLoad(options) {
			this.chapterId = options.id
			this.coursename = options.name
			this.chapterAll()
		},
		onPullDownRefresh() {
			this.chapterAll()
			console.log("执行了下拉刷新")
			uni.stopPullDownRefresh()
		},
		mounted() {
			this.isLogin = app.globalData.token.length > 0
			if (!this.isLogin) {
				delta = 2
				this.$refs.login.show()
			}
		},
		methods: {
			chapterOpen(chapter) {
				chapter.open = !chapter.open
				let url = this.$params.host + this.$params.chapter_root + this.$params.chapter_open_close
				let data = {
					token: app.globalData.token,
					chapterId: chapter.id,
					open: chapter.open
				}
				console.log(data)
				this.$request.post(url, data, res => {
					console.log(res)
				})
			},
			chapterOpenClose(chapter) {
				if (chapter.open) {
					uni.showModal({
						content: '关闭章节吗？',
						showCancel: true,
						cancelText: '否',
						confirmText: '是',
						success: res => {
							if (res.confirm) {
								this.chapterOpen(chapter)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.showModal({
						content: '开放章节吗？',
						showCancel: true,
						cancelText: '否',
						confirmText: '是',
						success: res => {
							if (res.confirm) {
								this.chapterOpen(chapter)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}

			},
			chapterAll() {
				let url = this.$params.host + this.$params.chapter_root + this.$params.chapter_teacher
				let data = {
					token: app.globalData.token,
					id: this.chapterId
				}
				this.$request.getParams(url, data, res => {
					console.log(res)
					this.chapters = res.data
				});
			},
			inputGetTitle(e) {
				name = e.detail.value
			},
			inutGetContent(e) {
				desc = e.detail.value
			},
			clickShowUser() {
				this.$refs.shell.showDialog()
			},
			chapterAdd() {
				let url = this.$params.host + this.$params.chapter_root + this.$params.chapter_add
				let data = {
					token: app.globalData.token,
					courseId: this.chapterId,
					desc,
					name,
				}
				console.log(data)
				this.$request.post(url, data, res => {
					if (!res.success) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						return
					}
				})
			},
			isLegal() {
				if (!this.$utils.checkLength(name, 2, '章节名称')) {
					return false
				}
				if (!this.$utils.checkLength(desc, 10, '章节描述')) {
					return false
				}
				return true
			},
			chapterCommit() {
				if (!this.isLegal()) {
					return
				}
				uni.showModal({
					content: '是否提交吗？',
					showCancel: true,
					cancelText: '否',
					confirmText: '是',
					success: res => {
						if (res.confirm) {
							this.chapterAdd()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	@import url("chaptermanage.css");
</style>
